<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Canvas</title>
      <style>
          html,body{
              margin: 0;
              overflow: hidden;
              width: 100%;
              height: 100%;
              /* cursor: none; */
              background-color: black;
          }
      </style>
   </head>
   <body>
       <canvas id="canvas"></canvas>
   </body>
   <script>
       let ctx=document.getElementById("canvas"),
           content=ctx.getContext('2d'),
           WIDTH,
           HEIGHT;
        WIDTH=document.documentElement.clientWidth;
        HEIGHT=document.documentElement.clientHeight;

        ctx.width=WIDTH;
        ctx.height=HEIGHT;
        
        let initRoundPopulation=80;
        let items=[];
        function Round_item(index,x,y){
            this.index=index;
            this.x=x;
            this.y=y;
            this.r=Math.random()*10+5;
            var alpha = Math.random();
            this.color="rgba(255,255,255," + alpha + ")";
        }
        Round_item.prototype.draw=function(){
            content.fillStyle=this.color;
            content.shadowBlur=this.r*2;
            content.beginPath();
            content.arc(this.x,this.y,this.r,0,2*Math.PI,false);
            content.closePath();
            content.fill();
        }
        Round_item.prototype.move=function(){
            this.y -= 0.5;
            this.x+=1;
            if (this.x >=(WIDTH+this.r/2)) {
                this.x =0;
            }
            if (this.y <= -10) {
                this.y = HEIGHT + 10;
            }
            this.draw();
        }
        function init(){
            for(let i=0;i<initRoundPopulation;i++){
                items[i]=new Round_item(i,Math.random()*WIDTH,Math.random()*HEIGHT);
                items[i].draw();
            }
        }
        function animate(){
            content.clearRect(0,0,WIDTH,HEIGHT);
            for(let index in items){
                items[index].move();
            }
            requestAnimationFrame(animate);
        }
        init();
        animate();
   </script>
</html>